// 等待页面加载完成后执行
window.addEventListener('load', function() {
    // 基于准备好的dom，初始化echarts实例
    // 参数1: 指定图表容器元素
    // 参数2: 主题，这里使用null表示默认主题
    // 参数3: 配置项对象，包含渲染相关的设置
    var myChart = echarts.init(document.getElementById('piechart'), null, {
        renderer: 'canvas',        // 使用canvas渲染器
        useDirtyRect: false,       // 禁用脏矩形优化
        progressive: true,         // 启用渐进式渲染
        progressiveThreshold: 500, // 数据量超过500时启用渐进式渲染
        progressiveStep: 100,      // 每100个数据点渲染一次
        eventPassive: true         // 启用事件被动监听，提高性能
    });

    // 指定图表的配置项和数据
    var option = {
        backgroundColor: '#2c343c',  // 设置图表背景色为深灰色
        title: {
            text: '豆瓣电影评分分布',  // 图表标题
            left: 'center',          // 标题居中
            textStyle: {
                color: '#fff'        // 标题文字颜色为白色
            }
        },
        tooltip: {
            trigger: 'item',         // 鼠标悬停时触发提示框
            formatter: '{a} <br/>{b} : {c} ({d}%)'  // 提示框内容格式：系列名、数据名、数值、百分比
        },
        legend: {
            orient: 'vertical',      // 图例垂直排列
            left: 'left',            // 图例靠左对齐
            textStyle: {
                color: '#fff'        // 图例文字颜色为白色
            }
        },
        series: [
            {
                name: '评分分布',     // 系列名称
                type: 'pie',         // 图表类型为饼图
                radius: '55%',       // 饼图半径，占容器大小的55%
                center: ['50%', '60%'], // 饼图中心点位置
                data: [              // 饼图数据
                    {value: 50, name: '9分以上'},    // 9分以上的电影数量
                    {value: 100, name: '8-9分'},     // 8-9分的电影数量
                    {value: 70, name: '7-8分'},      // 7-8分的电影数量
                    {value: 30, name: '7分以下'}     // 7分以下的电影数量
                ],
                emphasis: {          // 鼠标悬停时的强调效果
                    itemStyle: {
                        shadowBlur: 10,              // 阴影模糊度
                        shadowOffsetX: 0,            // 阴影水平偏移
                        shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
                    }
                },
                label: {
                    color: '#fff'    // 标签文字颜色为白色
                }
            }
        ]
    };

    // 使用配置项和数据显示图表
    myChart.setOption(option);

    // 监听窗口大小变化，当窗口大小改变时自动调整图表大小
    window.addEventListener('resize', function() {
        myChart.resize();
    });
});